<template>
  <div class="login-container">
    <div class="logo-container">
      <div class="logo-wrapper">
        <van-image
          width="100"
          height="100"
          src="/hospital-logo.svg"
          class="logo-image"
        />
      </div>
      <h2 class="title">医院移动端</h2>
      <p class="subtitle">便捷就医，智慧服务</p>
    </div>
    
    <van-form @submit="onSubmit" class="login-form">
      <div class="form-wrapper">
        <van-cell-group inset class="form-group">
          <van-field
            v-model="username"
            name="username"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请输入用户名' }]"
            left-icon="user-o"
            class="custom-field"
          />
          <div class="field-divider"></div>
          <van-field
            v-model="password"
            type="password"
            name="password"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
            left-icon="lock"
            class="custom-field"
          />
        </van-cell-group>

        <div class="action-area">
          <van-button 
            round 
            block 
            type="primary" 
            native-type="submit" 
            :loading="loading"
            class="login-button"
            size="large"
          >
            <span class="button-text">{{ loading ? '登录中...' : '登录' }}</span>
          </van-button>
          
          <div class="links-group">
            <router-link to="/forgot-password" class="text-link">忘记密码？</router-link>
            <router-link to="/register" class="text-link highlight">注册账号</router-link>
          </div>
        </div>
      </div>
    </van-form>

    <div class="footer-text">
      <van-checkbox v-model="agreeTerms" shape="square" class="agree-checkbox">
        登录即代表同意
        <a href="#" class="policy-link">《用户协议》</a>
        和
        <a href="#" class="policy-link">《隐私政策》</a>
      </van-checkbox>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { login } from '../api'

const router = useRouter()
const username = ref('')
const password = ref('')
const loading = ref(false)
const agreeTerms = ref(false)

const onSubmit = async (values) => {
  if (!agreeTerms.value) {
    showToast({
      message: '请先同意用户协议和隐私政策',
      type: 'warning'
    })
    return
  }

  try {
    loading.value = true
    const res = await login(values)
    localStorage.setItem('token', res.data.token)
    showToast({
      message: '登录成功',
      type: 'success'
    })
    router.push('/')
  } catch (error) {
    console.error('登录失败：', error)
    showToast({
      message: '登录失败，请检查用户名和密码',
      type: 'fail'
    })
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  background: linear-gradient(135deg, #f6f8ff 0%, #ffffff 100%);
}

.logo-container {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 48px;
}

.logo-wrapper {
  display: inline-block;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
}

.logo-image {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.subtitle {
  font-size: 16px;
  color: #666;
  margin-top: 8px;
}

.form-wrapper {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.form-group {
  border-radius: 12px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.custom-field {
  padding: 16px 0;
}

.field-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.04);
  margin: 0 16px;
}

.action-area {
  margin-top: 32px;
}

.login-button {
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--van-primary-color) 0%, var(--van-primary-color-end, #2779bd) 100%);
  box-shadow: 0 8px 16px rgba(var(--van-primary-color-rgb), 0.24);
  border: none;
}

.button-text {
  font-size: 17px;
}

.links-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 8px;
}

.text-link {
  font-size: 14px;
  color: #666;
  text-decoration: none;
  transition: color 0.3s;
}

.text-link.highlight {
  color: var(--van-primary-color);
  font-weight: 500;
}

.text-link:hover {
  opacity: 0.8;
}

.footer-text {
  margin-top: auto;
  padding: 24px 0;
  text-align: center;
}

.agree-checkbox {
  font-size: 13px;
  color: #666;
}

.policy-link {
  color: var(--van-primary-color);
  text-decoration: none;
}

:deep(.van-field__left-icon) {
  margin-right: 12px;
  font-size: 20px;
  color: #999;
}

:deep(.van-cell) {
  padding: 16px;
  background: transparent;
}

:deep(.van-field__control) {
  font-size: 15px;
  color: #333;
}

:deep(.van-field__control::placeholder) {
  color: #999;
}

:deep(.van-checkbox__label) {
  color: #666;
}
</style> 